<template>
  <div class="grid-view">
    <!-- 第一item -->
    <div class="view-item first" v-if="categoryUrl">
      <img :src="categoryUrl" alt="Category" />
    </div>
    <!-- 剩余的item -->
    <template v-for="(item, index) in productDetails" :key="index">
      <div class="view-item">
        <div class="grid-view-item">
          <div class="item-img">
            <img class="url" :src="item.url" alt="" />
          </div>

          <div class="item-title">{{ item.title }}</div>

          <div class="item-labels">
      <span class="label" v-for="item in item.activityList">
        {{ item.activityInfo }}
      </span>
          </div>

          <div class="item-price">
            <span class="prefix">{{ item.priceInfo?.prefix }}</span>
            <span class="prefix">{{ item.priceInfo?.currencyTag }}</span>
            <span class="price">{{ item.priceInfo?.buyPrice }}</span>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>
<script lang="ts" setup>

const props = defineProps({
  productDetails:{
    type:Array,
    default:[]
  },
  categoryUrl: {
    type:String,
    default:''
  },
})
</script>

<style lang="less" scoped>
.grid-view {
  width: 1266px ;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;

  .view-item {
    width: 20%;
    padding-right: 18px;
    margin-bottom: 18px;
    /* @include border(red); */
    /* height: $gridItemHeight; */
    box-sizing: border-box;
    background-color:#fafafa;
    cursor: pointer;
    .grid-view-item {
      text-align: center;
      background-color: #fff;
      border-radius: 8px;
      /* 动画效果 */
      transition: all 0.2s linear;
      &:hover {
        transition: all 0.2s linear;
        transform: translateY(-3px);
        box-shadow: 0 4px 8px 0 rgb(0 0 0 / 10%);
      }
      .item-img {
        .url {
          width: 130px;
          height: 150px;
          margin-top: 14px;
          margin-bottom: 7px;
        }
      }
      .item-title {
        padding: 0 20px;
        margin-top: 2px;
        font-weight: 500;
        font-size: 15px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .item-labels {
        height: 45px;
        display: flex;
        justify-content: center;
        align-items: center;
        .label {
          display: inline-block;
          padding: 1px 2px;
          color: #f34141;
          font-size: 13px;
          border: 1px solid #f34141;
          margin-right: 4px;
          margin-bottom: 4px;
        }
      }

      .item-price {
        padding-bottom: 40px;
        .prefix {
          color: #f34141;
          font-size: 13px;
        }

        .price {
          color: #f34141;
          font-size: 20px;
          line-height: 1;
        }
      }
    }
  }
  .first {
    width: 40%;
    & > img {
      width: 100%;
      height: 100%;
      /* 动画效果 */
      transition: all 0.2s linear;
      &:hover {
        transition: all 0.2s linear;
        transform: translateY(-3px);
        box-shadow: 0 4px 8px 0 rgb(0 0 0 / 10%);
      }
    }
  }
}
</style>
